import React, {useState} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import {Layout, Menu, Button, theme, Breadcrumb} from 'antd';
import styles from "./Home.module.less";
import { Link,Outlet } from 'react-router-dom';

//  导入你需要的页面组件，例如 Dashboard


const {Header, Sider, Content} = Layout;

const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {token: {colorBgContainer}} = theme.useToken();

    return (

        <Layout className={styles.home}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className={styles.homeTitleBox}>
                    <img src="https://yiming_chang.gitee.io/vue-pure-admin/logo.svg" alt="logo"/>
                    {!collapsed && <span className={styles.HomeTitle}>PureAdmin</span>}
                </div>

                {/* 左侧菜单栏 */}
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                >
                    <Menu.Item key="1" icon={<UserOutlined/>}>
                        <Link to="/home/dashboard">导航仪</Link>
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraOutlined/>}>
                        <Link to="/home/table">表格</Link>
                    </Menu.Item>

                </Menu>
            </Sider>

            <Layout>
                {/* 头部导航栏 */}
                <Header style={{padding: 0, background: colorBgContainer, display: 'flex', height: 34}}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 34,
                        }}
                    />
                    <Breadcrumb style={{
                        lineHeight: 2.5
                    }}
                                items={[
                                    {
                                        title: 'Home',
                                    },
                                    {
                                        title: <a href="">Application Center</a>,
                                    },
                                    {
                                        title: <a href="">Application List</a>,
                                    },
                                    {
                                        title: 'An Application',
                                    },
                                ]}
                    />
                </Header>
                {/* 内容显示区域 */}
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 500,
                        background: colorBgContainer,
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout>

    );
};

export default Home;
